<template>
  <div id="app">
    <div class="all_head">
      <div class="title_container">
        <div class="logo">
          <img src="@/assets/img/1.png" width="100px" height="100px" />
          <img src="@/assets/img/2.png" width="300px" height="100px" alt />
        </div>
        <div class="banner">
          <ul>
            <li :class="select == 1 ? 'sel' : ''" @click="changeSite(1, '/')">
              <span>首页</span>
            </li>
            <li
              :class="select == 2 ? 'sel' : ''"
              @click="changeSite(2, '/aboutus')"
            >
              <span>关于我们</span>
            </li>
            <li
              :class="select == 3 ? 'sel' : ''"
              @click="changeSite(3, '/allgoods')"
            >
              <span>产品展示</span>
            </li>
            <li
              :class="select == 4 ? 'sel' : ''"
              @click="changeSite(4, '/news')"
            >
              <span>新闻资讯</span>
            </li>
            <li
              :class="select == 5 ? 'sel' : ''"
              @click="changeSite(5, '/contactus')"
            >
              <span>联系我们</span>
            </li>
          </ul>
        </div>
      </div>
      <!-- <searchbar></searchbar> -->
      <router-view></router-view>
      <bank></bank>
    </div>
  </div>
</template>

<script>
// import searchbar from '@/components/smallComponent/search.vue'
import bank from '@/components/smallComponent/footbar.vue'
export default {
  components: {
    bank,
    // searchbar,
  },
  data() {
    return {
      select: 1,
    }
  },
  methods: {
    changeSite(site, url) {
      this.select = site
      this.$store.commit('changeSelectIndex', site)
      console.log('iste', site)
      this.$router.push(url)
    },
  },
}
</script>

<style lang="less">
.all_head {
  width: 100%;
  height: 100px;
  background-color: rgb(1, 73, 155);
  .title_container {
    width: 1230px;
    height: 100px;
    // background-color: skyblue;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    > .logo {
    }
    > .banner {
      > ul {
        list-style: none;
        display: flex;
        > li {
          width: 120px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          // background-color: #fff;
          margin: 0 10px;
          transform: skewX(-30deg);
          > span {
            transform: skewX(30deg);
            color: rgb(245, 237, 249);
            cursor: pointer;
          }
        }
        > li:hover {
          background-color: #fff;
          transition: all 0.2s ease-in-out;
          > span {
            color: rgb(1, 73, 155);
          }
        }
        > .sel {
          background-color: #fff;
          > span {
            display: inline-block;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: rgb(1, 73, 155);
          }
        }
      }
    }
  }
}
</style>
